<template>
    <div class="control-bar-container">
        <div :class="['control-bar', {disabled}]"
             ref="control-bar"
             @click="handleClick">
            <div class="left">
                <div class="title">
                    {{name}}
                </div>
                <div class="info"
                     v-show="active">
                    {{info}}
                </div>
            </div>
            <div class="right"
                 :style="{ backgroundImage:`url(${rightIcon}) `}">
                
            </div>
        </div>
        <slot></slot>
    </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex';
export default {
    props: {
        name: {
            default: 'Name',
            type: String
        },
        info: {
            default() {
                return this.$t('actionState');
            },
            type: String
        },
        iconName: {
            default: '',
            type: String
        },
        active: {
            default: false,
           
        },
        disabled: {
            default: false,
            type: Boolean
        }
    },
    computed: {
        ...mapGetters([
            'hasFault',
            'imgPath',
        ]),
        ...mapState(['darkMode']),
        rightIcon() {
            if (!this.iconName) {
                return '';
            }
            if (this.iconName.startsWith('ic_')) {
                return this.active ?
                    require(`../assets/${this.iconName}_${this.darkMode ? "Dark" : ""}On.png`) :
                    require(`../assets/${this.iconName}_${this.darkMode ? "Dark" : ""}Off.png`);
            }
            return this.active ?
                require(`../assets/${this.imgPath}ic_${this.iconName}_On.png`) :
                require(`../assets/${this.imgPath}ic_${this.iconName}_Off.png`);
        }
    },
    methods: {
        handleClick(e) {
            if (!this.disabled) {
                let top = e.clientY < 350 ? 'bottom' : 'top';
                this.$emit('handleClick', top);
            }

        }
    }
};
</script>

<style lang="less" scoped>
@import url("../style/controlBar.less");
</style>
